'use client';

import { useState } from 'react';
import Link from 'next/link';
import { VideoType } from '@/lib/video/video-service';

interface FilterSectionProps {
  currentTypeId: number;
  allTypes: VideoType[];
  years: string[];
  areas: string[];
  selectedYear?: string;
  selectedArea?: string;
  sortBy: string;
}

export default function FilterSection({
  currentTypeId,
  allTypes,
  years,
  areas,
  selectedYear,
  selectedArea,
  sortBy,
}: FilterSectionProps) {
  const [isFilterExpanded, setIsFilterExpanded] = useState(false);
  
  // 获取当前分类和子分类
  const currentType = allTypes.find(type => type.id === currentTypeId);
  const childTypes = allTypes.filter(type => type.parentId === currentTypeId);
  
  // 获取同级分类（具有相同父级的分类）
  const siblingTypes = currentType?.parentId 
    ? allTypes.filter(type => type.parentId === currentType.parentId)
    : allTypes.filter(type => !type.parentId);
  
  // 构建筛选URL
  const buildFilterUrl = (year?: string, area?: string, sort?: string) => {
    const params = new URLSearchParams();
    if (year) params.append('year', year);
    if (area) params.append('area', area);
    if (sort) params.append('sort', sort || 'newest');
    return `/type/${currentTypeId}${params.toString() ? `?${params.toString()}` : ''}`;
  };

  return (
    <div className="mb-6 bg-background-dark/40 rounded-lg overflow-hidden">
      <div className={`transition-all duration-300 ${isFilterExpanded ? 'max-h-[500px]' : 'md:max-h-none max-h-20'}`}>
        {/* 分类区域 */}
        {siblingTypes.length > 0 && (
          <div className="p-4 border-b border-gray-700/30">
            <h3 className="text-app-sm text-gray-300 font-medium bg-gradient-to-r from-gray-800/90 to-gray-900/95 inline-block px-3 py-1 rounded-full mb-3 border border-gray-600/30">分类</h3>
            <div className="flex flex-wrap gap-2 sm:gap-3">
              {siblingTypes.map(type => (
                <Link
                  key={type.id}
                  href={`/type/${type.id}`}
                  className={`px-3 py-1 text-app-sm rounded-full transition ${
                    type.id === currentTypeId
                      ? 'bg-red-600 text-white'
                      : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                  }`}
                >
                  {type.name}
                </Link>
              ))}
            </div>
          </div>
        )}
        
        {/* 子分类区域 */}
        {childTypes.length > 0 && (
          <div className="p-4 border-b border-gray-700/30">
            <h3 className="text-sm text-gray-300 font-medium bg-gradient-to-r from-gray-800/90 to-gray-900/95 inline-block px-3 py-1 rounded-full mb-3 border border-gray-600/30">子分类</h3>
            <div className="flex flex-wrap gap-2 sm:gap-3">
              <Link
                href={`/type/${currentTypeId}`}
                className={`px-3 py-1 text-sm rounded-full transition ${
                  !selectedYear && !selectedArea
                    ? 'bg-red-600 text-white'
                    : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                }`}
              >
                全部
              </Link>
              {childTypes.map(type => (
                <Link
                  key={type.id}
                  href={`/type/${type.id}`}
                  className="px-3 py-1 text-sm rounded-full bg-background-card/60 text-gray-300 hover:bg-background-hover transition"
                >
                  {type.name}
                </Link>
              ))}
            </div>
          </div>
        )}
        
        {/* 年份筛选 */}
        {years.length > 0 && (
          <div className="p-4 border-b border-gray-700/30">
            <h3 className="text-sm text-gray-300 font-medium bg-gradient-to-r from-gray-800/90 to-gray-900/95 inline-block px-3 py-1 rounded-full mb-3 border border-gray-600/30">年份</h3>
            <div className="flex flex-wrap gap-2 sm:gap-3">
              <Link
                href={buildFilterUrl(undefined, selectedArea, sortBy)}
                className={`px-3 py-1 text-sm rounded-full transition ${
                  !selectedYear
                    ? 'bg-red-600 text-white'
                    : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                }`}
              >
                全部
              </Link>
              {years.map(year => (
                <Link
                  key={year}
                  href={buildFilterUrl(year, selectedArea, sortBy)}
                  className={`px-3 py-1 text-sm rounded-full transition ${
                    year === selectedYear
                      ? 'bg-red-600 text-white'
                      : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                  }`}
                >
                  {year}
                </Link>
              ))}
            </div>
          </div>
        )}
        
        {/* 地区筛选 */}
        {areas.length > 0 && (
          <div className="p-4 border-b border-gray-700/30">
            <h3 className="text-sm text-gray-300 font-medium bg-gradient-to-r from-gray-800/90 to-gray-900/95 inline-block px-3 py-1 rounded-full mb-3 border border-gray-600/30">地区</h3>
            <div className="flex flex-wrap gap-2 sm:gap-3">
              <Link
                href={buildFilterUrl(selectedYear, undefined, sortBy)}
                className={`px-3 py-1 text-sm rounded-full transition ${
                  !selectedArea
                    ? 'bg-red-600 text-white'
                    : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                }`}
              >
                全部
              </Link>
              {areas.map(area => (
                <Link
                  key={area}
                  href={buildFilterUrl(selectedYear, area, sortBy)}
                  className={`px-3 py-1 text-sm rounded-full transition ${
                    area === selectedArea
                      ? 'bg-red-600 text-white'
                      : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
                  }`}
                >
                  {area}
                </Link>
              ))}
            </div>
          </div>
        )}
        
        {/* 排序区域 */}
        <div className="p-4">
          <h3 className="text-sm text-gray-300 font-medium bg-gradient-to-r from-gray-800/90 to-gray-900/95 inline-block px-3 py-1 rounded-full mb-3 border border-gray-600/30">排序</h3>
          <div className="flex flex-wrap gap-2 sm:gap-3">
            <Link
              href={buildFilterUrl(selectedYear, selectedArea, 'newest')}
              className={`px-3 py-1 text-sm rounded-full transition ${
                sortBy === 'newest'
                  ? 'bg-red-600 text-white'
                  : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
              }`}
            >
              最新
            </Link>
            <Link
              href={buildFilterUrl(selectedYear, selectedArea, 'hot')}
              className={`px-3 py-1 text-sm rounded-full transition ${
                sortBy === 'hot'
                  ? 'bg-red-600 text-white'
                  : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
              }`}
            >
              热门
            </Link>
            <Link
              href={buildFilterUrl(selectedYear, selectedArea, 'rating')}
              className={`px-3 py-1 text-sm rounded-full transition ${
                sortBy === 'rating'
                  ? 'bg-red-600 text-white'
                  : 'bg-background-card/60 text-gray-300 hover:bg-background-hover'
              }`}
            >
              评分
            </Link>
          </div>
        </div>
      </div>
      
      {/* 移动端展开/收起按钮 */}
      <button 
        className="md:hidden w-full flex items-center justify-center py-2 text-xs text-gray-400 hover:text-white transition-colors"
        onClick={() => setIsFilterExpanded(!isFilterExpanded)}
      >
        <span>{isFilterExpanded ? '收起' : '展开'}</span>
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          className={`ml-1 w-4 h-4 transition-transform ${isFilterExpanded ? 'rotate-180' : ''}`} 
          viewBox="0 0 20 20" 
          fill="currentColor"
        >
          <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
        </svg>
      </button>
    </div>
  );
} 